<template>
    <div id="main">
    <nav class="nav">
      <div class="container">
        <h1 class="logo" >问卷星球</h1>
        <ul>
          <li><a class="current" style="cursor:pointer">首页</a></li>
          <li><a  @click="toAbout" style="cursor:pointer">关于</a></li>
          <li><a   @click="toLogin" style="cursor:pointer" class="loginLi">登录</a></li>
          <li><a   @click="toRegister" style="cursor:pointer" class="registerLi">注册</a></li>
          <i class="fas fa-user person notseen ii" @click="toManage">个人中心</i>
          <i class="fas fa-sign-out-alt person notseen ii" @click="logout">注销登录</i>
        </ul>
      </div>
    </nav>
    <div class="hero">
      <div class="container">
        <h1>欢迎使用问卷星球</h1>
        <p>简约好用的问卷系统</p>
      </div>
    </div>
    <section class="container content" style="display:flex;flex-direction:column;justify-content:space-around;align-items:center;">
      <h2>多方式编辑问卷</h2>
      <h2>简约好用的问卷系统</h2>
      <h3>问卷星球为您提供专业调研服务</h3>
    </section>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Home',
  components: {
  },
  data:function(){
    return{
      
    }
  },
  created(){
    
  },
  mounted:function(){
      const nav = document.querySelector('.nav')
      const t3=document.querySelectorAll('.person');
    window.addEventListener('scroll', fixNav)

    function fixNav() {
    if(window.scrollY > nav.offsetHeight + 150) {
        nav.classList.add('active')
        t3.forEach(item=>{
          item.classList.add('black');
        })
    } else {
        nav.classList.remove('active');
        t3.forEach(item=>{
          item.classList.remove('black');
        })
    }
  }
    let tag=this.getCookie('isLogin');
    console.log("test+"+tag);
    const t1=document.querySelector('.loginLi');
    const t2=document.querySelector('.registerLi');
    if(tag==='true'){
      t1.classList.add('notseen');
      t2.classList.add('notseen');
      t3.forEach(item=>{item.classList.remove('notseen')});
    }else{
      t1.classList.remove('notseen');
      t2.classList.remove('notseen');
      t3.forEach(item=>{item.classList.add('notseen')});
    }
  },
  methods:{
    toLogin:function(){
      this.$router.push('/login');
    },
    getCookie:function(key) {
      var cookieArr = document.cookie.split('; ');
      for(var i = 0; i < cookieArr.length; i++) {
      var arr = cookieArr[i].split('=');
      if(arr[0] === key) {
        return arr[1];
      }
      }
        return false;
    },
    toRegister:function(){
      this.$router.push('/register');
    },
    toAbout:function(){
      this.$router.push('/about');
    },
    toManage:function(){
      this.$router.push('./manage');
    },
    logout:function(){
      console.log("logout");
      let uname=this.getCookie('username');
      let pw=this.getCookie('password');
      let uid=this.getCookie('uid');
      console.log(uname+pw+uid);
      this.axios.post('/user/logout',{username:uname,password:pw,uid:uid})
      .then(response=>{
        if(response.data.code===200){
          document.cookie="isLogin=false";
          this.$message.success('退出成功!');
          this.$store.commit('logout');
          const t1=document.querySelector('.loginLi');
          const t2=document.querySelector('.registerLi');
          const t3=document.querySelectorAll('.person');
          t1.classList.remove('notseen');
          t2.classList.remove('notseen');
          t3.forEach(item=>{item.classList.add('notseen')});
        }else{
          console.log(this.$store.username+this.$store.password);
          this.$message.error(response.data.msg+'退出失败!');
        }
      })
    }
  },
}
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#main {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: #222;
  padding-bottom: 50px;
}
.person{
  color:white;cursor:pointer;margin-left:0.5rem;
}
.ii:hover{
  color:#c0392b;
}
.notseen{
  display: none;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}

.nav {
  position: fixed;
  background-color: #212121;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
}

.nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  transition: all 0.3s ease-in-out;
}

.nav ul {
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: space-around;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 15px;
  transition: all 0.3s ease-in-out;
}
.nav h1{
  color: #fff;
}
.nav.active h1{
  color: #000;
}
.nav.active {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav.active a {
  color: #000;
}

.nav.active .container {
  padding: 10px 0;
}

.nav a.current,
.nav a:hover {
  color: #c0392b;
  font-weight: bold;
}

.hero {
  background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  height: 100vh;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
  z-index: -2;
}
.black{
  color: #000;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.hero h1 {
  font-size: 46px;
  margin: -20px 0 20px;
}

.hero p {
  font-size: 20px;
  letter-spacing: 1px;
}
.content{
  background-size: cover;
}
.content h2,
.content h3 {
  font-size: 150%;
  margin: 20px 0;
}

.content p {
  color: #555;
  line-height: 30px;
  letter-spacing: 1.2px;
}
</style>
